<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/public/static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" href="/public/static/h-ui/css/H-ui.admin.css"/>
    <link rel="stylesheet" href="/public/static/h-ui/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="/public/css/ns_blue_common.css"/>
    <script type="text/javascript" src="/public/js/jquery-2.1.1.js"></script>
    <style>
        input[type="checkbox"] + label::before {
            content: "\a0";  /*不换行空格*/
            display: inline-block;
            vertical-align: .2em;
            height: 15px;
            width: 15px;
            font-size: 22px;
            margin-right: .2em;
            border-radius: .2em;
            background-color: white;
            border: 1px solid #93a1a1;
            text-indent: .15em;
            line-height: .65;  /*行高不加单位，子元素将继承数字乘以自身字体尺寸而非父元素行高*/
            z-index: 9999999999999999999999999;
            position: absolute;
        }
        input[type="checkbox"]:checked + label::before {
            content: "\2714";
            background-color:#00a0e9;
            color: white;
            height: 15px;
            width: 15px;
            font-size: 22px;
        }
        input[type="checkbox"] {
            position: absolute;
            clip: rect(0, 0, 0, 0);
            cursor:pointer;
        }
    </style>
</head>
<body>
<div class="pd-20">
    <input type="hidden" value="{$group_id}" id="group_id">
    <div class="cl pd-5 bg-1 bk-gray mt-20">
		<span class="l">
		<a href="javascript:;" id="open_uploader" class="btn btn-primary radius"> 上传图片</a>
        <input accept="image/gif, image/jpeg, image/png, image/jpg" type="file" id="fileupload" style="display: none" name="file_upload" multiple="multiple"/>
        <a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"> 批量删除</a>
        <a href="javascript:;" onclick="img_box()" class="btn btn-warning radius"> 设为封面</a>
        <a href="javascript:;" onclick="zhan_img_box()" class="btn btn-primary radius"> 移动图片到其他相册</a>
		</span>
    </div>
    {include file="images/uploadImg"/}
    <div class="portfolio-content">
        <ul class="cl portfolio-area">
            {volist name="list" id="vo"}
                <li class="item">
                    <div class="portfoliobox">
                        <input class="checkbox" id="che-{$vo['img_id']}" name="img_array" type="checkbox" value="{$vo['img_id']}">
                        <label for="che-{$vo['img_id']}" style="height:150px;overflow: hidden;position: relative;">
                            <div  class="picbox" style="position: absolute;">
                                <img class="radius" src="{$vo['img_cover']}">
                            </div>
                        </label>
                    </div>
                </li>
            {/volist}
        </ul>
        <div class="n_page_no">
            {$page}
        </div>
    </div>
</div>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/public/static/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/public/static/lightbox2/2.8.1/js/lightbox.min.js"></script>
<script type="text/javascript">
    $('#open_uploader').click(function () {
      $('#fileupload').click();
    });
    var running = false;
    function datadel() {
        if(running){return;}
        var id = '';
        $('input[type=checkbox]:checked').each(function() {
            if (!isNaN($(this).val())) {
                id = $(this).val() + "," + id;
            }
        });
        if (id == '') {
            layer.msg('请选择图片', {icon: 2, time: 1000});
            return false;
        } else {
            id = id.substring(0, id.length - 1);
        }
        layer.confirm('确认要删除吗？',function(index){
            running = true;
            //此处请求后台程序
            //后台处理
            $.ajax({
                type : "post",
                url : "{:url('images/deletepicture')}",
                data : { 'img_id_array' : id },
                dataType : "json",
                beforeSend:function(XMLHttpRequest){
                    layer.msg('图片删除中...', {
                        icon: 16
                        ,shade: 0.05
                        ,time:900000
                    });
                },
                success : function(data) {
                    if (data['code'] > 0) {
                        layer.msg(data['message'], {icon: 1, time: 1000},function () {
                            window.location.reload();
                        });
                    }else{
                        layer.msg('部分图片正在商品中使用，没有被删除！', {icon: 5, time: 1000},function () {
                            window.location.reload();
                        });
                    }
                },
                fail:function (derr) {
                    running = false;
                }
            });
        });
    }
    function zhan_img_box() {
        var id = '';
        $('input[type=checkbox]:checked').each(function() {
            if (!isNaN($(this).val())) {
                id = $(this).val() + "," + id;
            }
        });
        if (id == '') {
            layer.msg('请选择图片', {icon: 2, time: 1000});
            return false;
        } else {
            id = id.substring(0, id.length - 1);
        }
        console.log(id);
        layer.open({
            type: 2,
            area: ['600px', '400px'],
            fix: false, //不固定
            maxmin: true,
            shade:0.4,
            title: '要转移到那个相册？',
            content: '__CONF_SITE__admin/images/zhan_img_box&img_id_array='+id,
            scrollbar:false,
            shadeClose:true,
        });
    }
    function img_box() {
        var strs= new Array(); //定义一数组
        var id = '';
        $('input[type=checkbox]:checked').each(function() {
            if (!isNaN($(this).val())) {
                id = $(this).val() + "," + id;
            }
        });
        if (id == '') {
            layer.msg('请选择图片', {icon: 2, time: 1000});
            return false;
        } else {
            id = id.substring(0, id.length - 1);
            strs=id.split(","); //字符分割
          if (strs.length > 1){
              layer.msg('请选择一张图片作为封面', {icon: 2, time: 1000});
              return false;
          }else {
              id=strs['0'];
          }
        }
        $.ajax({
            type : "post",
            url : "{:url('images/imagesBox')}",
            data : { 'img_id' : id },
            dataType : "json",
            success : function(data) {
                if (data['code'] > 0) {
                    layer.msg(data['message'], {icon: 1, time: 1000},function () {
                        window.parent.location.reload();
                    });
                }else{
                    layer.msg('设置失败！', {icon: 5, time: 1000});
                }
            }
        });
    }
</script>
</body>
</html>